import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import { Icon, Button, Tab, TabView } from "@rneui/themed";
import { Shadow } from "react-native-shadow-2";
import IconNavBar from '@/components/IconNavBar'
import { sectokenCommonCenterProps } from '@/config/navigatorProps'
import { CoinTransparentArray } from "@/config/config";
import { getValue } from "@/utils/deviceStorage";
import CommonContext from '@/utils/createContext'
import ReceiveHistory from './components/ReceiveHistory'
import SendHistory from './components/SendHistory'
import TransferHistory from './components/TransferHistory'
import TransferDetail from "./components/TransferDetail";
import Loading from "@/components/LoadingModal";
import { getETHTransferHistory, getERC20TransferHistory } from "@/utils/transfer";
import { getLabel } from "@/utils/util";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const Assets = (props) => {

    const [assetInfo, setAssetInfo] = useState({});
    const [loadingVisible, setLoadingVisible] = useState(false)
    const [selectedWallet, setSelectedWallet] = useState({});
    const [tabIndex, setTabIndex] = useState(0);
    const [transferData, setTransferData] = useState([]);
    const [selectedTransfer, setSelectedTransfer] = useState({});
    const [modalVisible, setModalVisible] = useState(false);

    useEffect(() => {
        let params = props.route.params
        if (params && params.assetInfo) {
            setAssetInfo(params.assetInfo)
        }
        let obj = getValue('selectedWallet')
        setSelectedWallet(obj)
        setLoadingVisible(true)
        getTransferHistory(params.assetInfo.label || 'ETH', obj).then(() => setLoadingVisible(false))
    }, [])

    const getTransferHistory = async (str, obj) => {
        if (obj) {
            let result
            switch (str) {
                case 'ETH':
                    result = await getETHTransferHistory(obj)
                    break;
                case 'USDT':
                    result = await getERC20TransferHistory(obj)
                    break;
                default:
                    break;
            }
            setTransferData(result || [])
        }
    }

    const handlePressTransfer = () => {
        props.navigation.navigate({
            name: 'send',
            params: {
                source: 'assets',
                coinType: assetInfo.label
            }
        })
    }

    const handlePressItem = (item) => {
        setSelectedTransfer(item)
        setModalVisible(true)
    }

    const handlePressReceive = () => {
        props.navigation.navigate({
            name: 'receive',
            params: {
                source: 'assets',
                coinType: assetInfo.label
            }
        })
    }

    const handlePressSettings = () => {
        props.navigation.navigate({
            name: 'assets-settings',
            params: {
                coinType: assetInfo.label
            }
        })
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} handlePressLeft={() => { props.navigation.goBack() }}
                {...sectokenCommonCenterProps}
                {...{ title: 'Assets', backgroundColor: '#F5F6FA', barStyle: 'dark-content' }} />
            <View style={styles.bodyContent}>
                <View style={{ marginTop: 17 * ratio }}>
                    <Shadow offset={[0, 2]}
                        distance={0} startColor='rgba(0,0,0,0.16)' finalColor='transparent' radius={6}>
                        <View style={styles.assetContent}>
                            <View style={{ flexDirection: 'row', marginLeft: 13 * ratio }}>
                                <View style={styles.logoContent}>
                                    <Image source={CoinTransparentArray[assetInfo.label]}
                                        style={{ width: 23 * ratio, height: 23 * ratio }} />
                                </View>
                                <View style={{ marginLeft: 6 * ratio }}>
                                    <Text style={styles.title2}>{getLabel(assetInfo.label)}</Text>
                                    <Text ellipsizeMode="middle" numberOfLines={1} style={styles.title5}>{selectedWallet.address}</Text>
                                </View>
                            </View>
                            <View style={{ flexDirection: 'row', marginRight: 13 * ratio, alignItems: 'flex-end' }}>
                                <Text style={styles.title1}>{assetInfo.amount && assetInfo.amount.substring(0, 4) || '0.00'}</Text>
                                <Text style={styles.title6}>{assetInfo.amount && assetInfo.amount.substring(4, 9)}</Text>
                            </View>
                        </View>
                    </Shadow>
                </View>
                <TouchableOpacity style={styles.settingContent} onPress={handlePressSettings}>
                    <Text style={{ ...styles.title3, marginRight: 10 * ratio }}>Settings</Text>
                    <Icon type="antdesign" name="right" color='#2A2A2A' size={12} />
                </TouchableOpacity>
                <View style={{ marginTop: 10 * ratio }}>
                    <Shadow offset={[0, 2]}
                        distance={0} startColor='rgba(0,0,0,0.16)' finalColor='transparent' radius={6}>
                        <View style={styles.transferContent}>
                            <Tab value={tabIndex} onChange={(e) => setTabIndex(e)} disableIndicator>
                                <Tab.Item
                                    containerStyle={{ backgroundColor: '#FFFFFF' }}
                                    title={<Text
                                        style={{ ...styles.title2, fontWeight: tabIndex == 0 ? 'bold' : '400' }}>
                                        Whole</Text>}>
                                </Tab.Item>
                                <Tab.Item
                                    containerStyle={{ backgroundColor: '#FFFFFF' }}
                                    title={<Text
                                        style={{ ...styles.title2, fontWeight: tabIndex == 1 ? 'bold' : '400' }}>
                                        Transfer</Text>}>
                                </Tab.Item>
                                <Tab.Item
                                    containerStyle={{ backgroundColor: '#FFFFFF' }}
                                    title={<Text
                                        style={{ ...styles.title2, fontWeight: tabIndex == 2 ? 'bold' : '400' }}>
                                        Receive</Text>}>
                                </Tab.Item>
                            </Tab>
                            <TabView value={tabIndex} onChange={(e) => setTabIndex(e)} animationType="spring">
                                <TabView.Item>
                                    {tabIndex == 0 && <CommonContext.Provider value={{ transferData, coinType: assetInfo.label, handlePressItem }}>
                                        <TransferHistory />
                                    </CommonContext.Provider>}
                                </TabView.Item>
                                <TabView.Item>
                                    {tabIndex == 1 && <CommonContext.Provider value={{ transferData, coinType: assetInfo.label, handlePressItem }}>
                                        <SendHistory />
                                    </CommonContext.Provider>}
                                </TabView.Item>
                                <TabView.Item>
                                    {tabIndex == 2 && <CommonContext.Provider value={{ transferData, coinType: assetInfo.label, handlePressItem }}>
                                        <ReceiveHistory />
                                    </CommonContext.Provider>}
                                </TabView.Item>
                            </TabView>
                        </View>
                    </Shadow>
                </View>
                <View style={{ flex: 1, justifyContent: 'flex-end' }}>
                    <View style={styles.buttonContent}>
                        <Button buttonStyle={styles.button1} onPress={handlePressTransfer}>
                            <Text style={styles.title4}>Transfer</Text>
                        </Button>
                        <Button type='outline' buttonStyle={styles.button2} onPress={handlePressReceive}>
                            <Text style={{ ...styles.title4, color: '#5B6DFD' }}>Receive</Text>
                        </Button>
                    </View>
                </View>
            </View>
            <CommonContext.Provider value={{ modalVisible, setModalVisible, selectedTransfer, coinType: assetInfo.label }}>
                {modalVisible && <TransferDetail />}
            </CommonContext.Provider>
            {loadingVisible && <Loading visible={loadingVisible} />}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F6FA'
    },
    bodyContent: {
        flex: 1,
        alignItems: 'center'
    },
    assetContent: {
        width: 341 * ratio,
        height: 73 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 6,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    logoContent: {
        width: 40 * ratio,
        height: 40 * ratio,
        backgroundColor: '#5B6DFD',
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    settingContent: {
        width: 326 * ratio,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginTop: 10 * ratio
    },
    transferContent: {
        width: 341 * ratio,
        height: 456 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 6
    },
    buttonContent: {
        width: width,
        height: 58 * ratio,
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    title1: {
        fontSize: 17,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: "#2A2A2A",
        lineHeight: 23
    },
    title2: {
        fontSize: 15,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: "#2A2A2A",
        lineHeight: 20
    },
    title3: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: "#2A2A2A",
        lineHeight: 18
    },
    title4: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: "#FFFFFF",
        lineHeight: 15
    },
    title5: {
        width: 108 * ratio,
        fontSize: 11,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: "#898989",
        lineHeight: 14
    },
    title6: {
        fontSize: 10,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: "#2A2A2A",
        lineHeight: 13
    },
    button1: {
        width: 134 * ratio,
        height: 37 * ratio,
        backgroundColor: '#5B6DFD',
        borderRadius: 4
    },
    button2: {
        width: 134 * ratio,
        height: 37 * ratio,
        borderWidth: 1,
        borderColor: '#5B6DFD',
        borderRadius: 4,
        marginLeft: 33 * ratio
    }
})
export default Assets